<template>
	<view>
		<view class="tabView">
			<view :class="tabCurrent==ind?'tabC':'tab'" v-if="" @click="tab(ind)" v-for="(item,ind) in orderTypeList"
				:key="ind">
				{{item}}
			</view>
		</view>
		<view class="orderList">
			<view class="order">
				<view class="bodyView">
					<view class="timeView">
						<view>
							<span class="modeTitle">维修方式：</span>
							<view @click="open2" class="buttonView">
								<view>全部</view>
								<image src="/packagesOrder/static/收起箭头小@2x.png"></image>
							</view>
							<uni-popup :animation="false" mask-background-color="rgba(0,0,0,0)" ref="popup2" type="center">
								<view class="modeList">
									<view class="mode" v-for="(item,ind) in mode" :key="ind">{{item}}</view>
								</view>
							</uni-popup> 
						</view>
						<view @click="open">
							<image class="timeImg" src="/packagesOrder/static/日期@2x.png"></image>
							<span class="modeTitle">预约日期</span>

							<uni-popup ref="popup" type="center">
								<view class="popupDate">
									<view class="start">
										<span>开始时间</span>
										<view class="example-body">
											<uni-datetime-picker return-type="date" @change="startChange"
												v-model="single" :value="startDateStr">
												<view class="dateStr">
													<view>{{startDateStr}}</view>
													<view>{{startTimeStr}}</view>
												</view>
											</uni-datetime-picker>
										</view>
									</view>
									<view class="start">
										<span>结束时间</span>
										<view class="example-body">
											<uni-datetime-picker return-type="date" @change="endChange" v-model="single"
												:value="endDateStr">
												<view class="dateStr">
													<view>{{endDateStr}}</view>
													<view>{{endTimeStr}}</view>
												</view>
											</uni-datetime-picker>
										</view>
									</view>
								</view>
							</uni-popup>
						</view>
					</view>
				</view>
			</view>
			<view class="order" v-for="(item,ind) in orderList">
				<view class="bodyView">
					<view><span>维修单号：</span>{{item.id}}</view>
					<view><span>维修方式：</span>{{item.mode}}</view>
					<view><span>预约日期：</span>{{item.time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				orderTypeList: ["进行中", "已完成"],
				tabCurrent: 0,
				orderList: [{}],

				//日期
				startDateStr: "2023年03月02日",
				startTimeStr: "17 : 30",
				startDate: null,
				endDateStr: "2023年03月02日",
				endTimeStr: "17 : 30",
				endDate: null,

				mode: ["到店维修", "上门取车"], //维修方式
			}
		},
		onLoad() {
			this.getOrderList()
			// this.open2()
		},
		methods: {
			//

			startChange(date) {
				console.log("date:", date);

				// 提取年、月、日、小时和分钟
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，并且补零
				let day = date.getDate().toString().padStart(2, '0'); // 补零
				let hours = date.getHours().toString().padStart(2, '0'); // 补零
				let minutes = date.getMinutes().toString().padStart(2, '0'); // 补零

				// 格式化日期字符串
				let formattedDate = `${year}年${month}月${day}日 ${hours}:${minutes}`;

				this.startDate = date
				this.startDateStr = `${year}年${month}月${day}日`;
				this.startTimeStr = `${hours} : ${minutes}`;
			},

			endChange(date) {
				console.log("date:", date);

				// 提取年、月、日、小时和分钟
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，并且补零
				let day = date.getDate().toString().padStart(2, '0'); // 补零
				let hours = date.getHours().toString().padStart(2, '0'); // 补零
				let minutes = date.getMinutes().toString().padStart(2, '0'); // 补零

				// 格式化日期字符串
				let formattedDate = `${year}年${month}月${day}日 ${hours}:${minutes}`;

				this.endDate = date
				this.endDateStr = `${year}年${month}月${day}日`;
				this.endTimeStr = `${hours} : ${minutes}`;
			},
			open() { //开弹窗
				this.$refs.popup.open('top')
			},
			close() { //关弹窗
				this.$refs.popup.close()
			},
			open2() { //开弹窗
				this.$refs.popup2.open('top')
			},
			close2() { //关弹窗
				this.$refs.popup2.close()
			},
			toInfo(id) {
				uni.navigateTo({
					url: "/packagesOrder/orderInfo/orderInfo?id=" + id
				})
			},
			tab(index) {
				this.tabCurrent = index
			},
			// 获取所有的订单
			getOrderList() {
				this.orderList = [{
					"id": 1234567,
					"mode": "到店维修",
					"time": "2025-01-05 10:29"
				}, {
					"id": 1234567,
					"mode": "到店维修",
					"time": "2025-01-06 14:29"
				}, {
					"id": 1234567,
					"mode": "上门取车",
					"time": "2025-01-05 10:29"
				}, {
					"id": 1234567,
					"mode": "上门取车",
					"time": "2025-01-05 10:29"
				}]
			}
		}
	}
</script>
<style>
	.modeTitle{
		font-size: 26rpx;
	}
	.buttonView{ 
		color: #fff;
		background-color: #2979ff;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx 0 30rpx;
		width: 90rpx;
		font-size: 24rpx;
		border-radius: 12rpx;
		line-height: 54rpx;
	}
	.buttonView image{
		width: 20rpx;
		height: 10rpx;
	}
	.buttonView{}
	/* 日期选择 */
	.dateStr {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
	}

	.dateStr>view {
		margin: 0 10rpx;
		background-color: #F2F2F2;
		border-radius: 50rpx;
		padding: 0 30rpx;
	}

	.modeList {
		box-shadow: 0 1px 8px 1px #e3e3e3;
		position: relative;
		top: -840rpx;
		width: 150rpx;
		margin-left:180rpx;
		margin-top: 1020rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
		font-weight: normal;
		text-align: center;
	}
	.modeList view{
		line-height: 50rpx;
	}
	.popupDate {
		position: relative;
		top: -850rpx;
		width: 650rpx;
		margin: 0 auto;
		margin-top: 1020rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		font-weight: normal;
		text-align: center;
	}

	.start {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;
		justify-content: space-around;

	}

	.start>span {}

	/* 日期选择 */
	.timeImg {
		width: 40rpx;
		height: 30rpx;
	}

	.timeView {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.timeView>view {
		display: flex;
		flex-wrap: nowrap;
		justify-content: left;
		align-items: center;
	}

	.timeView>view>span {
		margin-left: 10rpx;
	}

	/* 中部主要内容 */
	.bodyView span {
		font-weight: bold;
	}

	.bodyView {
		font-size: 24rpx;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		line-height: 60rpx;
		padding-top: 20rpx;
	}

	.order {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;
	}

	.orderList {
		margin: 0 auto;
	}

	/* 顶部tab */
	.tabView {
		width: 400rpx;
		margin: 0 auto;
		display: flex;
		font-size: 32rpx;
		justify-content: space-around;
		color: #fff;
		margin-top: 10rpx;
	}

	.tab {
		padding: 10rpx;
	}

	.tabC {
		padding: 10rpx;
		border-bottom: #fff 4rpx solid;
	}
</style>